<template>
	<view class="collect">
		<template v-if="state">
		<uni-list :border="false">
			<uni-list-item :border="false" v-for="item in data" :key="item.cleaner_id">
				<!-- 自定义 body -->
				<view slot="body" class="slot-box">
					<view class="slot-main">
						<image class="slot-main-image" :src="item.avatar[0]" mode=""></image>
						<view class="s-b-text">
							{{['','长期工','短期工'][item.cleaner_type]}}
						</view>
					</view>
					<view class="slot-main-con">
						<view class="main-con name">
							<text>{{item.real_name?item.real_name:item.nickname}}</text>
						</view>
						<view class="main-con score">
							<view class="dis-corder"><image class="img-14" :src="imgUrl1" mode="aspectFit" /><text style="color: #FEAD1D;">{{item.score || ''}}</text></view>
							<text class="m-c-text">已服务 {{item.services_num || '0'}}次</text>
						</view>
						<view class="main-con info">
							<view class="dis-corder"><image class="img-18" :src="pinglun" mode="aspectFit" @click="scoreClick(item.cleaner_id)" />
								<text>{{item.evaluate_num || '0'}}</text>
							</view>
							<view class="dis-corder" @click="praiseClick(item)"><image class="img-18" :src="item.collection?shouchangXz:shouchang" mode="aspectFit" /><text>{{item.collection_num}}</text></view>
							<view class="dis-corder">
								<button class="but" plain @click="opeClick(item)">立即预约</button>
							</view>
						</view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="data.length > 0" iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:calc(100vh - 40rpx);" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
		</view>		
		<uni-popup type="bottom" ref="popup" @change="change" @maskClick="onPopup" :mask-click="false">
			<view class="popup">
				<view class="info-card">
					<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0">
						<view class="card-list">
							<view class="c-l-top">
								<image class="c-l-t-img" :src="detailsData.avatar[0]" mode=""></image>
								<view class="c-l-t-con">
									<view class="c-l-t-title">
										<view class="">
											<text style="margin-right: 50rpx;"
												class="c-l-t-name">{{detailsData.real_name || ''}}</text>
											<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
											<text class="c-l-t-name"
												style="margin-left:5rpx;">{{detailsData.phone}}</text>
										</view>
										<view class="c-l-t-info">
											<image class="c-l-t-ioc" :src="imgUrl1" mode=""></image>
											<text class="c-l-t-text">{{detailsData.score || ''}}</text>
										</view>
									</view>
									<text class="c-l-e-text">{{detailsData.cleaner_des || ''}}</text>
								</view>
							</view>
							<view class="c-l-end">
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl4" mode="aspectFit"></image>
									<text class="c-l-e-text">实名认证</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl3" mode="aspectFit"></image>
									<text class="c-l-e-text">已培训</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl2" mode="aspectFit"></image>
									<text class="c-l-e-text">已考试</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" src="../../../static/imgas/xing.png" mode="aspectFit"></image>
									<text class="c-l-e-text">{{detailsData.cleaner_level}}</text>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<view class="list-card">
					<template v-if="commentsData.length != 0">
						<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'"
							:padding="0">
							<uni-list :border="false">
								<uni-list-item :border="false" :key="index" v-for="(i,index) in commentsData">
									<view slot="body" class="l-c">
										<view class="l-c-top">
											<image class="l-c-img" :src="i.logo[0]" mode=""></image>
											<view class="l-c-title">
												<view class="l-c-name">
													<text class="l-c-text">{{i.hotel_name || ''}}</text>
													<text class="l-c-date">{{i.create_time || ''}}</text>
												</view>
												<view class="l-c-iocn">
													<image class="l-c-i-img" :src="imgUrl1" mode="aspectFit"
														:key="indexa" v-for="(j,indexa) in i.star"></image>
												</view>
											</view>
										</view>
										<view class="l-c-con">
											<text class="l-c-c-text">{{i.content || ''}}</text>
										</view>
										<view class="l-c-end">
											<uni-tag :circle="true" :text="s" :key="indexs"
												v-for="(s,indexs) in i.label"></uni-tag>
										</view>
									</view>
								</uni-list-item>
							</uni-list>
							<uni-load-more iconType="auto" :status="status1" @clickLoadMore="clickLoadMore1"
								:content-text="contentText" />
						</uni-card>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;" v-else>
						<image :src="imgUrl" style="width: 360rpx;margin: 100rpx 0; height: 330rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;">暂无数据!</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1:`${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/yikaoshi.png`,
								pinglun: `${getApp().globalData.imgScr}jd/pinglun.png`,
				imgUrl3:`${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				imgUrl4:`${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl5:`${getApp().globalData.imgScr}jd/yikaoshi.png`,
				shouchang:`${getApp().globalData.imgScr}jd/shouchang.png`, // 未点赞图片
				shouchangXz:`${getApp().globalData.imgScr}jd/shouchang_xz.png`, // 已点赞图片
				data:[], // 收藏的保洁数据
				page:1, // 收藏初始页码
				total:0, // 收藏数据总条数
				status: 'more', // 收藏加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
				uid:'', // 点击评论的当前列id
				detailsData:{},// 评论详情数据
				commentsData:[], // 评论数据
				page1:1, // 评论初始页码
				total1:0, // 评论数据总条数
				status1: 'more', // 评论加载状态
				state:true, // 默认状态
			};
		},
		onShow() {
			Object.assign(this.$data, this.$options.data())
			this.getClick(this.page)
		},
		onPullDownRefresh() {
			let _this = this
			// 下拉刷新时触发
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					Object.assign(_this.$data, _this.$options.data())
					_this.getClick()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		methods:{
			/**
			 * 立即预约
			 * @param {Object} data
			 */
			opeClick(data) {
				let url = "/hotelAdmin/procter/order/order?"
				uni.navigateTo({
					url:`${url}id=${data.cleaner_id}&type=${data.cleaner_type}`
				})
			},
			/**
			 * 收藏按钮触发事件
			 * @param {object} data 当前列的数据
			 */
			async praiseClick(data) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelorder/collection',{cleaner_id:data.cleaner_id,cleaner_type:data.cleaner_type})
					this.data = []
					let rep = await this.getClick(1,this.page*5)
					
					uni.showToast({
						icon:"none",
						title:'取消收藏'
					})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let rep = await this.$http.post('/index/Hotelpersonal/collection',{
						page:page,
						limit:limit
						})
					this.data = [...this.data,...rep.data]
					this.state = this.data.length
					this.total = rep.total
					if(this.page >= rep.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
				
			},
			/**
			 * 评论按钮触发事件
			 * @param {Object} data 当前列数据
			 */
			async scoreClick(id) {
				let _this = this
				this.uid = id
				try{
					let res = await this.$http.get('/index/Hotelcleaner/cleanerinfo',{id:id})
					this.detailsData = res
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist',{
						id:id,
						page:1,
						limit:10
						})
					this.commentsData = rep.data
					this.status1 = this.page1 >= rep.last_page?'no-more':'more'
					// 打开弹出层
					_this.$refs.popup.open()
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
				
			},
			/**
			 * 弹出层状态发生变化触发
			 * @param {Object} e  e={show: true｜false,type:当前模式}
			 */
			change: function(e) {
			},
			/**
			 * 收藏列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			clickLoadMore(e) {
				if(e.detail.status == 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 评论列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore1(e) {
				if(e.detail.status == 'no-more') return this.status1 = 'no-more'
				this.status1 = 'loading'
				this.page1 += 1
				try{
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist',{
						id:this.uid,
						page:this.page1,
						limit:10
						})
					this.commentsData = [...this.commentsData,...rep.data]
					this.total1 = rep.total
					if(this.page1 >= rep.last_page) return this.status1 = 'no-more'
					this.status1 = 'more'
				}catch(e){
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 点击遮罩层触发
			 */
			onPopup:async function() {
				await this.$refs.popup.close()
				this.page1 = 1
				this.status1 = 'more'
				this.total1 = 0
				await uni.showTabBar({
					animation:true
				})
			},
		}
	}
</script>

<style lang="scss">
.collect {
	padding: 20rpx;
	.img-14 {
		width: 28rpx;
		height: 28rpx;
		margin: 8rpx;
	}
	.img-18 {
		width: 32rpx;
		height: 32rpx;
		margin: 8rpx;
	}
	.dis-corder {
		display: flex;
		align-items: center;
	}
	.uni-list {
		border-radius: 20rpx;
		overflow: hidden;
		padding-bottom: 40rpx;
	}
	.uni-list-item__container {
		box-sizing: border-box;
		padding: 40rpx 40rpx 0;
	}
	.slot-box {
		display: flex;
		align-items: center;
		flex: 1;
		.slot-main {
			position: relative;
			display: flex;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.slot-main-image {
			width: 180rpx;
			height: 180rpx;
			border: 0;
		}
		.s-b-text {
			position: absolute;
			bottom: 0;
			left: 0;
			line-height: 40rpx;
			background-color: rgba($color: #000000, $alpha: 0.4);
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
			padding: 0 20rpx;
			border-top-right-radius: 20rpx;
		}
		.slot-main-con {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;
			.main-con {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				.but {
					width:188rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 34rpx;
					line-height: 68rpx;
					border: 0;
				}
				.but1 {
					color: rgba($color: #ffffff, $alpha: 0);
					background:rgba($color: #ffffff, $alpha: 0)
				}
			}
			.name {
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}
			.score {
				margin: 12rpx 0;
				.m-c-text {
					margin-left: 50rpx;
				}
			}
			.info {
				justify-content: space-between;
			}
		}
	}
}
	// 弹出层样式
	.popup {
		width: 100%;
		height: 80vh;
		border-radius: 20rpx 20rpx 0 0;
		overflow: auto;
		background-color: #F5F5F5;

		.uni-card {
			border-radius: 20rpx;
		}

		// 保洁详情信息 卡片
		.info-card {
			.card-list {
				display: flex;
				flex-direction: column;

				.c-l-top {
					display: flex;
					align-items: center;

					.c-l-t-img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 20rpx;
						overflow: hidden;
						border: 0;
						margin-right: 20rpx;
					}

					.c-l-t-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						height: 130rpx;

						.c-l-t-title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.c-l-t-name {
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
							}

							.c-l-t-info {
								.c-l-t-ioc {
									width: 28rpx;
									height: 28rpx;
									margin-right: 6rpx;
								}

								.c-l-t-text {
									font-size: 28rpx;
									font-weight: 500;
									color: #FEAD1D;
								}
							}
						}
					}

					.c-l-e-text {
						font-size: 20rpx;
						font-weight: 500;
						line-height: 1.2em;
						color: rgba($color: #000000, $alpha: 0.5);
					}
				}

				.c-l-end {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.c-l-e-kp {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						.c-l-e-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
							margin-left: 6rpx;
						}
					}
				}
			}
		}

		// 酒店评价信息列表
		.list-card {
			.uni-list-item__container {
				padding: 20rpx 0;
			}

			.l-c {
				width: 100%;
			}

			// 标题栏
			.l-c-top {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.l-c-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.l-c-title {
					flex: 1;
					height: 60rpx;

					.l-c-name {
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.l-c-text {
							font-size: 26rpx;
							font-weight: bold;
							color: #000000;
							margin-right: 50rpx;
						}

						.l-c-date {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
					}

					.l-c-iocn {
						display: flex;
						align-items: center;
						width: 100%;

						.l-c-i-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			// 内容栏
			.l-c-con {
				display: flex;
				margin-bottom: 25rpx;
				margin-left: 10rpx;

				.l-c-c-text {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 1.2em;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}

			// 底部标签栏
			.l-c-end {
				margin: 10rpx;
				display: flex;

				/deep/.uni-tag {
					color: #000;
					opacity: .7;
					border: 0;
					border-radius: 5rpx;
					font-family: -webkit-body;
					background-color: #f7f7f7;
					margin: 0rpx 20rpx 20rpx 0;
					border-radius: 5rpx !important;
				}
			}
		}
	}
</style>
